<template>
	<div class='titleDiv'>
		<van-row type="flex" justify="space-between">
			<van-col span="22">
				<van-field 
					class='searchDiv' 
					v-model="search_value" 
					size="large"
					@input="inputValFn"
					placeholder="请输入用户名">
					
					<!-- 搜索框放大镜icon -->
					<template v-slot:left-icon>
						<van-icon name="search" class='searchIconLeft' />
					</template>

					<!-- 清空搜索框 -->
					<template #button>
						<van-icon 
							v-show="isCloseShow" 
							@click="clear_search_inputFn"
							name="close" 
							class='search_close_r' />
					</template>

				</van-field >
			</van-col>
			<van-col span="3">
				<van-button class='cancelBtn' type="primary" size="mini">取消</van-button>
			</van-col>
		</van-row>
	</div>
</template>

<script>
export default{
	name:'searchPage',
	data(){
		return {
			search_value:'',
			input_v:'',
			isCloseShow:false
		}
	},
	watch:{
		input_v(){
			this.isCloseShow = true;
		}
	},
	methods:{
		// 获得焦点
		inputValFn( v ){
			console.log( v )
			this.input_v = v;
		},
		// 清空搜索框按钮
		clear_search_inputFn(){
			this.search_value = '';
			this.isCloseShow = false;
		}
	}
}
</script>

<style scoped>
.titleDiv{
	padding: .2rem .4rem;
}
.cancelBtn{
    width: .98667rem;
    height: .53333rem;
    line-height: .53333rem;
    text-align: center;
    color: #333;
    border: 0;
    margin-left: .21333rem;
    font-size: .37333rem;
    background: #fff;
    margin-top: .1rem;
}
.searchDiv{
	border: 0;
    background-color: #f4f4f4;
    height: .74667rem;
    line-height: .45rem;
    border-radius: 4px;
    font-size: .37333rem;
}
.searchIconLeft{
	font-size: .5rem;margin-top: .05rem;
}
.search_close_r{
	/*display: none;*/
}
</style>